function change_table(){
  var table = layui.table;
  //转换静态表格
  table.init('demo', {
    escape: false,
    limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
    //支持所有基础参数
  });
}
// height: 520 //设置高度

// 将select变成select2
$(window).load(function(){
  $("select").attr("lay-verify", "required")
  $("select").attr("lay-search", "")
  var form = layui.form
  form.render('select')
})

// 这套方法是使用lebel的
// 这个是初始化input（也是为了嵌套表单的gem写的）
function initIput() {
  if($(".fields input")){
    $(".fields input").each(function(){
      $(this).addClass("layui-input")
    })
  }
}
// 自己写的一个上传图片(点击更换的时候才走的方法)
function uploadIMG1(){
  // 这个是初始化，页面最初加载的时候走
  initImage();
  // 手动写一个js回显(只对表单id为wenui_form的表单生效)
  $(document).on('change', '#wenui_form input[type=file]', function(){
    var _label = $(this).siblings("label");
    loadImg($(this), _label);
  })
  // 当点击添加的时候应该走的js
  addnested()
  // 初始化嵌套表单的input
  initIput()
}

// 这个是初始化，页面最初加载的时候走
function initImage() {
  $("#wenui_form input[type=file]").each(function(){
    var _label = $(this).siblings("label")
    $(this).hide()
    _label.text("")
    _label.append(`<img src="${$(this).attr("data-file-url") || "/images/addFile.png"}" class='label_upload_img'>`)
  })
}

// 点击嵌套表单的添加按钮才走的方法
function addnested(){
  // 当点击添加的时候应该走的js
  // 针对嵌套表单那个gem写了一个插入图片的样式配合这个js使用
  $(document).on('nested:fieldAdded', function(event){
    var field = event.field;
    var dateField = field.find('input[type=file]');
    if(dateField){
      var _label = dateField.siblings("label")
      dateField.hide()
      _label.text("")
      // 这个是插入img
      // _label.append(`<img src="/images/addFile.png" class='label_upload_img'>`)
      // 这个是插入背景图那个都可以
      _label.append(`<div class='upload_img_css'></div>`)
    }
    // 给插入的input添加input样式
    field.find("input").each(function(){
      $(this).addClass("layui-input")
    })
    // 如果有select就重新调用一下select
    var form = layui.form
    form.render('select')
  })
}

// 获取文件对象
function loadImg(_this, _label){
  //获取文件
  var file = _this[0].files[0];
  //创建读取文件的对象
  var reader = new FileReader();
  //创建文件读取相关的变量
  var imgFile;
  //为文件读取成功设置事件
  reader.onload=function(e) {
    imgFile = e.target.result;
    if(is_img(file.name)){
      _label.html('<img src='+imgFile+' class="label_upload_img">');
    }else{
      _label.text(file.name)
    }
  };
  //正式读取文件(实际这补才读取了对象)
  reader.readAsDataURL(file)
}

// 判断文件后缀
function is_img(file_name){
  var regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
  if (regex.test(file_name)) {
    return true
  } else {
    return false
  }
}


// 侧边栏，如果子元素被选中，就展开侧边栏
function open_left_nav(root_element, aim_element, aim_style){
  $("."+root_element).each(function(){
    let _inner = $(this).find("."+aim_element)
    if(_inner[0] && !$(this).hasClass(aim_style)){
      $(this).addClass(aim_style)
    }
  })
}
// 侧边栏展开调用
$(window).load(function(){
  open_left_nav("layui-nav-item", "layui-this", "layui-nav-itemed")
})

// notice提示自动隐藏
function hide_notice(element){
  setTimeout(function(){
    $("."+element).hide();
  }, 2000);
}

$(window).load(function(){
  hide_notice("notice")
})

// 自定义弹窗开始================
function myAlert(options){
  // 初始化参数
  let _data = {
    maxHeight: '830', //弹窗高度，不是必填
    maxWidth: '100',//弹窗宽度，不是必填
    title: "", //弹窗标题名称，不是必填
    demo_id: '', //需要弹出的div（ID）下的内容，不是必填，这个添了message将不会出现
    close_callback: '',// 回调方法，不是必填
    message: '' // 想要弹出的内容，不是必填，这个添了 demo_id下的div内容将不会出现
  }
  var _options = $.extend(_data, options); //合并option 和 定义的data参数
  let _content = $(`#${_options.demo_id}`); //获取对应的元素标签

  // 弹出自定义输入的内容 调用示范：myAlert({maxHeight: '250',title: "",maxWidth: "300",message: '随便的内容，哒哒！'})
  if (_options.demo_id == '' || _options.message.length > 0){
    //追加样式
    $('body').append(`
      <div class='my-alert-background'></div>
      <div class='layui-anim layui-anim-down my-alert' style="max-height:${_options.maxHeight}px;width:${_options.maxWidth}px; overflow-y: auto;">
        <div class='my-alert-top'>
          <div class='my-alert-title'>${_options.title}</div>
          <div class='my-alert-x'>x</div>
        </div>
        <div>${_options.message}</div>
      </div>`
    )
  }else{  // 弹出标签下的内容  调用示范：myAlert({maxHeight: '250',title: "",maxWidth: "300", demo_id: 'test'})
    _content.addClass('my-hide'); //隐藏当前界面上的div标签
    //追加样式
    $('body').append(`<div class='my-alert-background'></div><div class='layui-anim layui-anim-down my-alert' style="max-height:${_options.maxHeight}px;width:${_options.maxWidth}px;"><div class='my-alert-top'><div class='my-alert-title'>${_options.title}</div><div class='my-alert-x'>x</div></div><div>${_content.html()}</div></div>`)
  }
  // 关闭事件
  $(document).on('click', '.my-alert-background, .my-alert-x', function() {
    $('.my-alert-background, .my-alert').remove(); // 移除添加的追加的内容
    _options.close_callback(); //回调事件
  })
}
// 自定义弹窗结束============

// rails的confirm弹窗开始============
$(document).ready(function() {
  $.rails.confirm = function(message, element) { //message 要弹的内容， element 代表rails中confirm的元素标签的对象， 例如link_to上的data:{confirm: "123"},在html中link_to解析为a标签，element就可以是a标签的对象
    return bootStrapConfirmModal(message, function a() {}, element); };

  $.rails.allowAction = function(element) { //获取element的标签属性对象
      var message = element.data('confirm'), //定义初始值
          answer = false,
          callback;
      if (!message) { return true; } //不存在data-confirm 直接返回true

      if ($.rails.fire(element, 'confirm')) {
          answer = $.rails.confirm(message, element); // 请求confirm方法的返回值
          callback = $.rails.fire(element, 'confirm:complete', [answer]); //激活confirm弹窗事件
      }
      return answer && callback;
  };

  // 请求方法
  $.rails.handleLink = function(link) {
      //判断请求方式 remote有值且为true是ajax请求，否则是html请求
      if (link.data('remote') !== undefined) {
          $.rails.handleRemote(link); //ajax请求url地址
      } else if (link.data('method')) {
          $.rails.handleMethod(link); //请求url地址
      }
      return false;
  };
});

function bootStrapConfirmModal(message, callBack, element = "") {
  // 定义要追加的html的confirm样式
  let str = `<div id="modal-confirm">
  <div class='my-alert-background' style="background-color: transparent;"></div>
    <div class='layui-anim layui-anim-down my-alert' style="max-height:100px;width:300px; overflow-y: auto; display: flex; flex-flow: column; bottom: 500px; padding: 12px 25px 12px 25px;box-shadow: 1px -4px 20px rgb(0 0 0 / 20%);">
      <div class='my-alert-title' style="padding-bottom: 0px; font-size: 18px;">⚠️ 提示</div>
      <hr class="layui-border-blue">
      <div style= "padding: 0px 5px 2px 5px; color: #666; height: 100%;" class="modal-body"></div>
        <div style="align-self: flex-end;">
          <button class="layui-btn layui-btn-primary layui-border layui-btn-xs" id='modal-cancel_wy'>取消</button>
          <button class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" id= 'modal-accept_wy'>确认</button>
        </div>
      </div>
    </div>
  </div>`
  $('body').append(str); //追加html
  $("#modal-confirm div.modal-body").html(message); //追加内容
  $("#modal-confirm #modal-cancel_wy, #modal-confirm .my-alert-background").click(function(e) { // 点击取消
    $('#modal-confirm').remove(); // 移除添加的追加的内容
    return false;
  });
  if (element == '') { //如果为空代表没有可以接收到的对象
      $("#modal-confirm #modal-accept_wy").click(function(e) {
          callBack();
          $('#modal-confirm').remove(); // 移除添加的追加的内容
      })
  } else {
      //确认按钮
      $("#modal-confirm #modal-accept_wy").click(function(e) {
        $('#modal-confirm').remove(); // 移除添加的追加的内容
          $.rails.handleLink(element); //请求url
          return false;
      });
  }
};
//rails的confirm弹窗结束============

//图片点击事件
//table-bordered tbody td
$(document).on('click', '.layui-table-cell img', function(){
  console.log(2222222)
  src_url = $(this).attr("src")
  $('.elastic_show img').attr("src", src_url)
  $('.elastic_show').show()
  $('.mask').show()
})

$(document).on('click', '.mask', function(){
  console.log(2222222)
  $('.elastic_show').hide()
  $('.mask').hide()
})
//图片点击事件结束


// 自定义富文本
function BuildFroalaEditor (name){
  var editorInstance = new FroalaEditor(name, {
    toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', '|',  'fontFamily', 'fontSize', 'textColor', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '|', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', '|', 'print', 'help', 'fullscreen', '|', 'undo', 'redo'],
    // toolbarButtons: ['undo', 'redo', 'clearFormatting', '|', 'bold', 'italic', 'underline','strikeThrough','|', 'fontFamily', 'fontSize', 'color', '|','paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', '|', 'print', 'spellChecker', 'help', '|', 'fullscreen'],
    // quickInsertButtons: ['link', 'image', 'video', 'table', 'myButton'],
    // pluginsEnabled: ['link', 'image', 'video',  'table', 'lists'],
    imageDefaultAlign: 'left', // 插入图片默认居左显示
    options: '',
    toolbarSticky: false, // 是否自动吸顶
    fileUploadURL: '/upload_file',
    imageUploadURL: '/upload_image',
    videoUploadURL: '/upload_video',
    language: "zh_cn"
  })
  return editorInstance
}